<template>
  <el-menu-item v-if="!router.children || !router.children.length" :index="router.path">
    <i :class="router.icon"></i>
    <span>{{router.name}}</span>
  </el-menu-item>
  <el-sub-menu v-else :index="router.path">
    <template v-slot:title>
      <!-- <i :class="router.icon"></i> -->
      <span>{{router.name}}</span>
    </template>
    <el-menu-item-group>
      <template v-for="item in router.children">
        <menu-item :router="item"></menu-item>
      </template>
    </el-menu-item-group>
  </el-sub-menu>
</template>

<script>
  
  export default {
    name: 'menuItem',
    props: {
      router: {
        type: Object,
        default: () => {}
      }
    }
  }
  
</script>

<style>
</style>
